<template>
	<div class="page8" :style="{height: carryHeight + 'px'}">
		<div class="cont">
			<div class="nav">
				<mt-button size="small" class="jiangli" @click.native.prevent="active='tab-container1'" :class="active" @click="tab1"></mt-button>
				<mt-button size="small" class="hongbao" @click.native.prevent="active='tab-container2'" :class="active" @click="tab2"></mt-button>
			</div>
			<div class="page-tab-container">
				<mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable >
					<mt-tab-container-item id="tab-container1">
						<table>
							<thead >
								<th align="center">时间</th>
								<th align="center">场次</th>
								<th align="center">奖励</th>
							</thead>
							<tbody>
								<tr v-for="item in payrule">
									<td align="center">{{item.created_at.substr(0,10)}}</td>
									<td align="center">{{item.spieltag}}</td>
									<td align="center">+{{item.sum}}</td>
								</tr>
							</tbody>
						</table>
					</mt-tab-container-item>
					<mt-tab-container-item id="tab-container2" >
						<table>
							<thead >
								<th align="center">时间</th>
								<th align="center">ID</th>
								<th align="center">奖励</th>
							</thead>
							<tbody>
								<tr v-for="item in redpacketrule">
									<td align="center" v-if="item.created_at">{{item.created_at.substr(0,10)}}</td>
									<td align="center">{{item.member_id}}</td>
									<td align="center">+{{item.sum}}</td>
								</tr>
								
						
							</tbody>
						</table>
					</mt-tab-container-item>
				</mt-tab-container>
			</div>
		</div>
		<bottom-nav act="record"></bottom-nav>
	</div>
</template>

<script>
	import bottomNav from './bottomNav'

	export default {
		name: 'page8',
		data () {
			return {
				carryHeight: 0,
				active: 'tab-container1',
				'payrule':[{
					"created_at":"加载中",
					"spieltag":"",
					"sum":""
				}],
				'redpacketrule':[{
					"created_at":"加载中",
					"id":"",
					"sum":""
				}],
				load:false

			}
		},
		components: { bottomNav },
		mounted () {
			var that = this;
			// console.log("page8")
			this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
			console.log(this.userInfo)
			this.axios({
				method:"post",
				url: "http://xyydj.daoapp.io/mobile/forrecord/list",
				data: {
					"openid":that.userInfo.openid,
					"pageLength":15,
					"current_page":1,
					"conditions":{
						"member_id":that.userInfo.id,
						"type":2
					}
				}
			}).then(function(res){

// 				result	 = res.data.data.data;
// 				result.forEach((v,i) => {
// 					v.created_at
// 				})
//				 that.payrule
				that.load =  true;
				console.log(res.data.data.data)
				that.payrule = res.data.data.data;
				// console.log('2')

			})
		},
		computed(){
			// accessTime(){
			// 	 return this.message.split('').reverse().join('')
			// 	 this.payrue.forEach((v,i) => {
			// 	 		var split = v.created_at.indexOf(" ");
			// 	 		v.created_at.substr(0,split);
			// 	 })
			// }
		},
		created() {
            this.init();
        },
        methods: {
        	init () {
        		this.carryHeight = (document.documentElement.clientHeight - document.documentElement.clientHeight/750*4.9*10);			
        	},
        	tab1 () {
        				    var that = this;
							this.axios({
								method:"post",
								url: "http://xyydj.daoapp.io/mobile/forrecord/list",
								data: {
									"openid":that.userInfo.openid ,
									"pageLength":15,
									"current_page":1,
									"conditions":{
										"member_id":that.userInfo.id ,
										"type":2
									}
								}
							}).then(function(res){
								console.log(res);
								that.payrule = res.data.data.data;
							})
        	},
        	tab2 () {
        			     	var that = this;
        					this.axios({
								method:"post",
								url: "http://xyydj.daoapp.io/mobile/forrecord/list",
								data: {
									"openid":that.userInfo.openid ,		
									"current_page":1,
									"pageLength":15,
									"conditions":{
										"member_id":that.userInfo.id ,
										"type":1
									}
								}
							}).then(function(res){
								console.log(res);
								that.redpacketrule = res.data.data.data;
							})
        	}
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.page8{padding-top: 1.8rem;background: #cf1f30 url(../assets/img/bigRedBg.jpg) center 0 no-repeat;background-size: 100% auto;overflow: hidden;}
.cont{padding: .5rem .25rem;margin: 0 auto;background: url(../assets/img/myMoneyBg.png) center 0 #f9ecdb no-repeat;background-size: 100% auto;width: 33.5rem;max-height: 52.2rem;border-radius: 14px;border: 6px solid rgb(233, 233, 233, .5);overflow-y: scroll;box-sizing: border-box;}
.nav{display: -webkit-box;-webkit-box-pack: justify;padding: 2.1rem 0 0;height: 4.55rem;width: 100%;box-sizing: border-box;}
.nav button{display: block;padding-bottom: 2.5rem;margin: 0 2.7rem;background: none;border: none;width: 11rem;box-shadow: none;border-radius: 0;}
.nav button.jiangli{background: url(../assets/img/jianglijilucharY.png) center 0 no-repeat;background-size: 9.25rem auto;width: 9.25rem;height: 2.25rem;}
.nav button.hongbao{background: url(../assets/img/hongbaojilucharY.png) center 0 no-repeat;background-size: 9.25rem auto;width: 9.25rem;height: 2.25rem;}
.cont table{margin-top: 2rem;width: 100%;border-collapse:separate;border-spacing:0 5px;}
.cont table thead{padding: 1rem 0;height: 5rem;}
.cont table th{font-size: 1.7rem;color: #ed282c;}
.cont table tbody tr{margin-top: .45rem;background: #fff;color: #ed282c;font-size: 1.3rem;width: 100%;height: 3.1rem;line-height: 3.1rem;box-sizing: border-box;}
.cont table tbody td{border-top: 1px solid #e7b26c;border-bottom: 1px solid #e7b26c;}
.cont table tbody td:first-child{border-left: 1px solid #e7b26c;border-radius: 6px 0 0 6px;}
.cont table tbody td:last-child{border-right: 1px solid #e7b26c;border-radius: 0 6px 6px 0;}
.cont table tbody tr:nth-child(2n){background: #fad9a3;}
.nav button.tab-container1:first-child{background: url(../assets/img/jianglijiluchar.png) center 0 no-repeat;background-size: 9.25rem auto;border-bottom: 2px solid #f1292d;}
.nav button.tab-container2:last-child{background: url(../assets/img/hongbaojiluchar.png) center 0 no-repeat;background-size: 9.25rem auto;border-bottom: 2px solid #f1292d;}
</style>
